<template>
    <div class="outer">
        <div class="title">学生列表</div>
        <div class="thead">
            <div class="row bold">
                <div class="col">编号</div>
                <div class="col">姓名</div>
                <div class="col">性别</div>
                <div class="col">年龄</div>
            </div>
        </div>
        <div class="tbody">
            <div v-if="students.length===0">无数据</div>
            <template v-else>
            <div class="row bold" v-for="s of students">
                <div class="col">{{ s.id }}</div>
                <div class="col">{{ s.name }}</div>
                <div class="col">{{ s.sex }}</div>
                <div class="col">{{ s.age }}</div>
            </div>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from "vue";
import axios from "../api/request.ts";
import {Student,SpringList} from '../model/Model8080.ts'
// interface Student {
//     id: number,
//     name: string,
//     sex: string,
//     age: number
// }

const students = ref<Student[]>([]);

async function getStudents() {
    const response = await axios.get<SpringList<Student>>('/api/students');
    console.log(response.data.data);
    console.log(response.data.code);
    students.value = response.data.data;
}

onMounted(() => getStudents())
</script>

<style scoped>
.outer {
    font-family: 华文行楷;
    font-size: 20px;
    width: 500px;
}

.title {
    margin-bottom: 10px;
    font-size: 30px;
    color: #333;
    text-align: center;
}

.row {
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.col {
    border: 1px solid #f0f0f0;
    width: 15%;
    height: 35px;
    text-align: center;
    line-height: 35px;
}

.bold .col {
    background-color: #f1f1f1;
}
</style>
